<template>
  <div class="main-content">
    <div class="article-list">
      <div v-for="article in tableData" :key="article.id" class="article-row" @click="getArticle(article.title)">
        <!-- TODO: implement the row layout here -->
        <div class="article-image">
          <el-image :src="article.pictureUrl" fit="cover"></el-image>
          <!--          <div class="article-image" :style="{ backgroundImage: `url(${article.pictureUrl})` }"></div>-->
        </div>
        <div class="article-details">
          <!-- TODO: implement the details layout here -->
          <div class="article-details">
            <div class="article-title">{{ article.title }}</div>
            <div class="article-author">{{ article.createUser }}</div>
            <div class="article-content">{{ article.overView }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="block" style="padding-top: 10px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>


</template>

<script>
import {serverIp} from "../../../public/config";
import axios from "@/request";

export default {
  name: "homePage",
  data() {

    return {
      imageUrl: "",
      dialogVisible: false,
      serverIp: serverIp,
      tableData: [],
      pageSize: 5,
      pageNum: 1,
      total: 0,
      title: "",
      token: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).token : "",
      dialogFormVisible: false,
      form: {},
      multipleSelection: [],
      content: '',
      viewDialogVis: false,

    }
  },
  computed: {
    headers() {
      return {
        token: `${this.token}`,
      };
    },
    pictureUrl() {
      return this.form.pictureUrl
    }
  },
  methods: {

    getArticle(title) {
      this.$router.push({

        path: `/SingleArticle/${title}`

      })

    },
    load() {
      axios.post('article/getArticlesByPage', {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        title: this.title,


      }).then((res) => {
        console.log(res)
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    },
    /**
     * 每页数据数量改变事件
     * @param val
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.load();
    },
    /**
     * 页数改变事件
     * @param val
     */
    handleCurrentChange(val) {
      this.pageNum = val;
      this.load();
      console.log(`当前页: ${val}`);
    },

  },
  created() {
    this.load();
  },
}
</script>

<style scoped>


.article-details {
  width: 70%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.article-title {
  height: 33.33%;
  font-size: 20px;
  font-weight: bold;
}

.article-author {
  height: 33.33%;
  font-size: 16px;
  color: #666;
}

.article-content {
  height: 66.66%;
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-row {
  display: flex;
  align-items: center;
  height: 200px;
  margin-bottom: 10px;
  backdrop-filter: blur(20px);
}
.article-row:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.article-image {
  width: 30%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border: 1px solid white; /* 创建黑色边界实线，线宽为 1 像素 */
  overflow: hidden;

}


.article-image > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.article-image > div > img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.article-details {
  background-color: #f5f5f5; /* or any other color you prefer */
  width: 70%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*.main-content {*/

/*  background: linear-gradient(to bottom, #1E90FF, #2E8B57);*/
/*  border-radius: 10px; !* 设置圆角 *!*/
/*  margin-top: 10px; !* 设置距离顶部的距离 *!*/
/*  width: 80%; !* 设置宽度为整个页面的80% *!*/
/*  margin-left: auto; !* 居中对齐 *!*/
/*  margin-right: auto; !* 居中对齐 *!*/
/*  padding: 20px; !* 设置内部的内边距 *!*/
/*  height: 100%;*/
/*}*/

.article-list {
  width: 80%;
  margin: 0 auto;
}

.article-row {
  display: flex;
  align-items: center;
  height: 200px;
  margin-bottom: 10px;

  border-radius: 8px;
  overflow: hidden;
}

</style>
